/**
 * Redux 的中间件
 *
 *    工作流程：
 *
 *      1. 没有中间件
 *
 *        dispatch   ->   reducer
 *
 *      2. 有一个中间件 m1
 *
 *        dispatch   ->   m1    ->  reducer
 *
 *      3. 有多个中间件 m1  m2  m3
 *
 *        dispatch   ->   m1    ->  m2    ->    m3    -> reducer
 * 
 *    中间件的定义
 * 
 *      // 使用 ES5 function 来编写 Middleware
        function exampleMiddleware(storeAPI) {
          return function wrapDispatch(next) {
            return function handleAction(action) {
              // 在这里做任何事情：用 next(action) 向前传递 action，
              // 或者使用 storeAPI.dispatch(action) 重启管线
              // 这里也可以使用 storeAPI.getState()

              return next(action)
            }
          }
        }

        // 使用 ES6 arrow function 来编写 Middleware
        const exampleMiddleware = storeAPI => next => action => {
          // 当每个 action 都被 dispatch 时，在这里做一些事情
          return next(action)
        }
      
      中间件的使用
        createStore(reducer, applyMiddleware(...中间件))
 */

import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";

import store from "./store";

import App from "./App";

const root = ReactDOM.createRoot(document.querySelector("#root")!);

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);
